<!DOCTYPE html>
<html style="display: none;" lang="zh">
    <head>
    <meta charset="utf-8">
    <!--
        © Material Theme
        https://github.com/viosey/hexo-theme-material
        Version: 1.5.0 -->
    <script>
        window.materialVersion = "1.5.0"
        // Delete localstorage with these tags
        window.oldVersion = [
            'codestartv1',
            '1.3.4',
            '1.4.0',
            '1.4.0b1'
        ]
    </script>

    


    <!-- dns prefetch -->
    <meta http-equiv="x-dns-prefetch-control" content="on">














    <!-- Title -->
    
    <title>
        
            jQuery-源码分析（二）：jQuery核心函数 | 
        
        C-Jimmy个人小站
    </title>

    <!-- Meta & Info -->
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <meta name="format-detection" content="telephone=no"/>
    <meta name="theme-color" content="#0097A7">
    <meta name="author" content="C-Jimmy">
    <meta name="description" itemprop="description" content="
jQuery() 函数是jQuery库的最核心的函数，jQuery的一切都是基于此函数的，该函数主要用于获取HTML DOM元素并将其封装为jQuery对象，以便jQuery对象提供的其他属性和方法对DOM元素进行操作，">
    <meta name="keywords" content="C-Jimmy博客,jQuery,源码分析,jQuery核心函数,jQuery.fn.init()">

    <!-- Import lsloader -->
    <script>(function(){window.lsloader={jsRunSequence:[],jsnamemap:{},cssnamemap:{}};lsloader.removeLS=function(key){try{localStorage.removeItem(key)}catch(e){}};lsloader.setLS=function(key,val){try{localStorage.setItem(key,val)}catch(e){}};lsloader.getLS=function(key){var val="";try{val=localStorage.getItem(key)}catch(e){val=""}return val};versionString="/*"+(window.materialVersion||"unknownVersion")+"*/";lsloader.clean=function(){try{var keys=[];for(var i=0;i<localStorage.length;i++){keys.push(localStorage.key(i))}keys.forEach(function(key){var data=lsloader.getLS(key);if(window.oldVersion){var remove=window.oldVersion.reduce(function(p,c){return p||data.indexOf("/*"+c+"*/")!==-1},false);if(remove){lsloader.removeLS(key)}}})}catch(e){}};lsloader.clean();lsloader.load=function(jsname,jspath,cssonload,isJs){if(typeof cssonload==="boolean"){isJs=cssonload;cssonload=undefined}isJs=isJs||false;cssonload=cssonload||function(){};var code;code=this.getLS(jsname);if(code&&code.indexOf(versionString)===-1){this.removeLS(jsname);this.requestResource(jsname,jspath,cssonload,isJs);return}if(code){var versionNumber=code.split(versionString)[0];if(versionNumber!=jspath){console.log("reload:"+jspath);this.removeLS(jsname);this.requestResource(jsname,jspath,cssonload,isJs);return}code=code.split(versionString)[1];if(isJs){this.jsRunSequence.push({name:jsname,code:code});this.runjs(jspath,jsname,code)}else{document.getElementById(jsname).appendChild(document.createTextNode(code));cssonload()}}else{this.requestResource(jsname,jspath,cssonload,isJs)}};lsloader.requestResource=function(name,path,cssonload,isJs){var that=this;if(isJs){this.iojs(path,name,function(path,name,code){that.setLS(name,path+versionString+code);that.runjs(path,name,code)})}else{this.iocss(path,name,function(code){document.getElementById(name).appendChild(document.createTextNode(code));that.setLS(name,path+versionString+code)},cssonload)}};lsloader.iojs=function(path,jsname,callback){var that=this;that.jsRunSequence.push({name:jsname,code:""});try{var xhr=new XMLHttpRequest;xhr.open("get",path,true);xhr.onreadystatechange=function(){if(xhr.readyState==4){if(xhr.status>=200&&xhr.status<300||xhr.status==304){if(xhr.response!=""){callback(path,jsname,xhr.response);return}}that.jsfallback(path,jsname)}};xhr.send(null)}catch(e){that.jsfallback(path,jsname)}};lsloader.iocss=function(path,jsname,callback,cssonload){var that=this;try{var xhr=new XMLHttpRequest;xhr.open("get",path,true);xhr.onreadystatechange=function(){if(xhr.readyState==4){if(xhr.status>=200&&xhr.status<300||xhr.status==304){if(xhr.response!=""){callback(xhr.response);cssonload();return}}that.cssfallback(path,jsname,cssonload)}};xhr.send(null)}catch(e){that.cssfallback(path,jsname,cssonload)}};lsloader.iofonts=function(path,jsname,callback,cssonload){var that=this;try{var xhr=new XMLHttpRequest;xhr.open("get",path,true);xhr.onreadystatechange=function(){if(xhr.readyState==4){if(xhr.status>=200&&xhr.status<300||xhr.status==304){if(xhr.response!=""){callback(xhr.response);cssonload();return}}that.cssfallback(path,jsname,cssonload)}};xhr.send(null)}catch(e){that.cssfallback(path,jsname,cssonload)}};lsloader.runjs=function(path,name,code){if(!!name&&!!code){for(var k in this.jsRunSequence){if(this.jsRunSequence[k].name==name){this.jsRunSequence[k].code=code}}}if(!!this.jsRunSequence[0]&&!!this.jsRunSequence[0].code&&this.jsRunSequence[0].status!="failed"){var script=document.createElement("script");script.appendChild(document.createTextNode(this.jsRunSequence[0].code));script.type="text/javascript";document.getElementsByTagName("head")[0].appendChild(script);this.jsRunSequence.shift();if(this.jsRunSequence.length>0){this.runjs()}}else if(!!this.jsRunSequence[0]&&this.jsRunSequence[0].status=="failed"){var that=this;var script=document.createElement("script");script.src=this.jsRunSequence[0].path;script.type="text/javascript";this.jsRunSequence[0].status="loading";script.onload=function(){that.jsRunSequence.shift();if(that.jsRunSequence.length>0){that.runjs()}};document.body.appendChild(script)}};lsloader.tagLoad=function(path,name){this.jsRunSequence.push({name:name,code:"",path:path,status:"failed"});this.runjs()};lsloader.jsfallback=function(path,name){if(!!this.jsnamemap[name]){return}else{this.jsnamemap[name]=name}for(var k in this.jsRunSequence){if(this.jsRunSequence[k].name==name){this.jsRunSequence[k].code="";this.jsRunSequence[k].status="failed";this.jsRunSequence[k].path=path}}this.runjs()};lsloader.cssfallback=function(path,name,cssonload){if(!!this.cssnamemap[name]){return}else{this.cssnamemap[name]=1}var link=document.createElement("link");link.type="text/css";link.href=path;link.rel="stylesheet";link.onload=link.onerror=cssonload;var root=document.getElementsByTagName("script")[0];root.parentNode.insertBefore(link,root)};lsloader.runInlineScript=function(scriptId,codeId){var code=document.getElementById(codeId).innerText;this.jsRunSequence.push({name:scriptId,code:code});this.runjs()};lsloader.loadCombo=function(jslist){var updateList="";var requestingModules={};for(var k in jslist){var LS=this.getLS(jslist[k].name);if(!!LS){var version=LS.split(versionString)[0];var code=LS.split(versionString)[1]}else{var version=""}if(version==jslist[k].path){this.jsRunSequence.push({name:jslist[k].name,code:code,path:jslist[k].path})}else{this.jsRunSequence.push({name:jslist[k].name,code:null,path:jslist[k].path,status:"comboloading"});requestingModules[jslist[k].name]=true;updateList+=(updateList==""?"":";")+jslist[k].path}}var that=this;if(!!updateList){var xhr=new XMLHttpRequest;xhr.open("get",combo+updateList,true);xhr.onreadystatechange=function(){if(xhr.readyState==4){if(xhr.status>=200&&xhr.status<300||xhr.status==304){if(xhr.response!=""){that.runCombo(xhr.response,requestingModules);return}}else{for(var i in that.jsRunSequence){if(requestingModules[that.jsRunSequence[i].name]){that.jsRunSequence[i].status="failed"}}that.runjs()}}};xhr.send(null)}this.runjs()};lsloader.runCombo=function(comboCode,requestingModules){comboCode=comboCode.split("/*combojs*/");comboCode.shift();for(var k in this.jsRunSequence){if(!!requestingModules[this.jsRunSequence[k].name]&&!!comboCode[0]){this.jsRunSequence[k].status="comboJS";this.jsRunSequence[k].code=comboCode[0];this.setLS(this.jsRunSequence[k].name,this.jsRunSequence[k].path+versionString+comboCode[0]);comboCode.shift()}}this.runjs()}})();</script>

    <!-- Import queue -->
    <script>function Queue(){this.dataStore=[];this.offer=b;this.poll=d;this.execNext=a;this.debug=false;this.startDebug=c;function b(e){if(this.debug){console.log("Offered a Queued Function.")}if(typeof e==="function"){this.dataStore.push(e)}else{console.log("You must offer a function.")}}function d(){if(this.debug){console.log("Polled a Queued Function.")}return this.dataStore.shift()}function a(){var e=this.poll();if(e!==undefined){if(this.debug){console.log("Run a Queued Function.")}e()}}function c(){this.debug=true}}var queue=new Queue();</script>

    <!-- Favicons -->
    <link rel="icon shortcut" type="image/ico" href="/img/favicon.png">
    <link rel="icon" sizes="192x192" href="/img/favicon.png">
    <link rel="apple-touch-icon" href="/img/favicon.png">

    <!--iOS -->
    <meta name="apple-mobile-web-app-title" content="Title">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="HandheldFriendly" content="True">
    <meta name="MobileOptimized" content="480">

    <!-- Add to homescreen for Chrome on Android -->
    <meta name="mobile-web-app-capable" content="yes">

    <!-- Add to homescreen for Safari on iOS -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-title" content="C-Jimmy个人小站">

    <!-- Site Verification -->
    
    

    <!-- RSS -->
    

    <!--[if lte IE 9]>
        <link rel="stylesheet" href="/css/ie-blocker.css">

        
            <script src="/js/ie-blocker.zhCN.js"></script>
        
    <![endif]-->

    <!-- Import CSS -->
    
        <style id="material_css"></style><script>if(typeof window.lsLoadCSSMaxNums === "undefined")window.lsLoadCSSMaxNums = 0;window.lsLoadCSSMaxNums++;lsloader.load("material_css","/css/material.min.css?Z7a72R1E4SxzBKR/WGctOA==",function(){if(typeof window.lsLoadCSSNums === "undefined")window.lsLoadCSSNums = 0;window.lsLoadCSSNums++;if(window.lsLoadCSSNums == window.lsLoadCSSMaxNums)document.documentElement.style.display="";}, false)</script>
        <style id="style_css"></style><script>if(typeof window.lsLoadCSSMaxNums === "undefined")window.lsLoadCSSMaxNums = 0;window.lsLoadCSSMaxNums++;lsloader.load("style_css","/css/style.min.css?MKetZV3cUTfDxvMffaOezg==",function(){if(typeof window.lsLoadCSSNums === "undefined")window.lsLoadCSSNums = 0;window.lsLoadCSSNums++;if(window.lsLoadCSSNums == window.lsLoadCSSMaxNums)document.documentElement.style.display="";}, false)</script>

        

    

    

    <!-- Config CSS -->

<!-- Other Styles -->
<style>
  body, html {
    font-family: Roboto, "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
    overflow-x: hidden !important;
  }
  
  code {
    font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
  }

  a {
    color: #00838F;
  }

  .mdl-card__media,
  #search-label,
  #search-form-label:after,
  #scheme-Paradox .hot_tags-count,
  #scheme-Paradox .sidebar_archives-count,
  #scheme-Paradox .sidebar-colored .sidebar-header,
  #scheme-Paradox .sidebar-colored .sidebar-badge{
    background-color: #0097A7 !important;
  }

  /* Sidebar User Drop Down Menu Text Color */
  #scheme-Paradox .sidebar-colored .sidebar-nav>.dropdown>.dropdown-menu>li>a:hover,
  #scheme-Paradox .sidebar-colored .sidebar-nav>.dropdown>.dropdown-menu>li>a:focus {
    color: #0097A7 !important;
  }

  #post_entry-right-info,
  .sidebar-colored .sidebar-nav li:hover > a,
  .sidebar-colored .sidebar-nav li:hover > a i,
  .sidebar-colored .sidebar-nav li > a:hover,
  .sidebar-colored .sidebar-nav li > a:hover i,
  .sidebar-colored .sidebar-nav li > a:focus i,
  .sidebar-colored .sidebar-nav > .open > a,
  .sidebar-colored .sidebar-nav > .open > a:hover,
  .sidebar-colored .sidebar-nav > .open > a:focus,
  #ds-reset #ds-ctx .ds-ctx-entry .ds-ctx-head a {
    color: #0097A7 !important;
  }

  .toTop {
    background: #757575 !important;
  }

  .material-layout .material-post>.material-nav,
  .material-layout .material-index>.material-nav,
  .material-nav a {
    color: #757575;
  }

  #scheme-Paradox .MD-burger-layer {
    background-color: #757575;
  }

  #scheme-Paradox #post-toc-trigger-btn {
    color: #757575;
  }

  .post-toc a:hover {
    color: #00838F;
    text-decoration: underline;
  }

</style>


<!-- Theme Background Related-->

    <style>
      body{
        background-color: #F5F5F5;
      }

      /* blog_info bottom background */
      #scheme-Paradox .material-layout .something-else .mdl-card__supporting-text{
        background-color: #fff;
      }
    </style>




<!-- Fade Effect -->

    <style>
      .fade {
        transition: all 800ms linear;
        -webkit-transform: translate3d(0,0,0);
        -moz-transform: translate3d(0,0,0);
        -ms-transform: translate3d(0,0,0);
        -o-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0);
        opacity: 1;
      }

      .fade.out{
        opacity: 0;
      }
    </style>


<!-- Import Font -->
<!-- Import Roboto -->

    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">


<!-- Import Material Icon -->

    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">




    <!-- Import jQuery -->
    
        <script>lsloader.load("jq_js","/js/jquery.min.js?ezyEvm8ST5CGfpA+kFFi1g==", true)</script>
    

    <!-- The Open Graph protocol -->
    <meta property="og:url" content="https://c-jimmy.github.io">
    <meta property="og:type" content="blog">
    <meta property="og:title" content="jQuery-源码分析（二）：jQuery核心函数 | C-Jimmy个人小站">
    <meta property="og:image" content="https://c-jimmy.github.io/img/favicon.png" />
    <meta property="og:description" content="
jQuery() 函数是jQuery库的最核心的函数，jQuery的一切都是基于此函数的，该函数主要用于获取HTML DOM元素并将其封装为jQuery对象，以便jQuery对象提供的其他属性和方法对DOM元素进行操作，">
    <meta property="og:article:tag" content="jQuery"> <meta property="og:article:tag" content="源码分析"> <meta property="og:article:tag" content="jQuery核心函数"> <meta property="og:article:tag" content="jQuery.fn.init()"> 

    
        <meta property="article:published_time" content="Sat Dec 02 2017 19:25:50 GMT+0800" />
        <meta property="article:modified_time" content="Thu Dec 07 2017 19:18:04 GMT+0800" />
    

    <!-- The Twitter Card protocol -->
    <meta name="twitter:title" content="jQuery-源码分析（二）：jQuery核心函数 | C-Jimmy个人小站">
    <meta name="twitter:description" content="
jQuery() 函数是jQuery库的最核心的函数，jQuery的一切都是基于此函数的，该函数主要用于获取HTML DOM元素并将其封装为jQuery对象，以便jQuery对象提供的其他属性和方法对DOM元素进行操作，">
    <meta name="twitter:image" content="https://c-jimmy.github.io/img/favicon.png">
    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:url" content="https://c-jimmy.github.io" />

    <!-- Add canonical link for SEO -->
    
        <link rel="canonical" href="https://c-jimmy.github.io/2017/12/02/jQuery-源码分析（二）：jQuery核心函数/index.html" />
    

    <!-- Structured-data for SEO -->
    
        


<script type="application/ld+json">
{
    "@context": "https://schema.org",
    "@type": "BlogPosting",
    "mainEntityOfPage": "https://c-jimmy.github.io/2017/12/02/jQuery-源码分析（二）：jQuery核心函数/index.html",
    "headline": "jQuery-源码分析（二）：jQuery核心函数",
    "datePublished": "Sat Dec 02 2017 19:25:50 GMT+0800",
    "dateModified": "Thu Dec 07 2017 19:18:04 GMT+0800",
    "author": {
        "@type": "Person",
        "name": "C-Jimmy",
        "image": {
            "@type": "ImageObject",
            "url": "/img/avatar.png"
        },
        "description": "最痛苦的事,,不是失败，是我本可以"
    },
    "publisher": {
        "@type": "Organization",
        "name": "C-Jimmy个人小站",
        "logo": {
            "@type":"ImageObject",
            "url": "/img/favicon.png"
        }
    },
    "keywords": ",jQuery,源码分析,jQuery核心函数,jQuery.fn.init()C-Jimmy博客",
    "description": "
jQuery() 函数是jQuery库的最核心的函数，jQuery的一切都是基于此函数的，该函数主要用于获取HTML DOM元素并将其封装为jQuery对象，以便jQuery对象提供的其他属性和方法对DOM元素进行操作，",
}
</script>


    

    <!-- Analytics -->
    
    
    

    <!-- Custom Head -->
    

<link rel="stylesheet" href="/css/prism.css" type="text/css">
<link rel="stylesheet" href="/css/prism-line-numbers.css" type="text/css"></head>


    
        <body id="scheme-Paradox" class="lazy">
            <div class="material-layout  mdl-js-layout has-drawer is-upgraded">
                

                <!-- Main Container -->
                <main class="material-layout__content" id="main">

                    <!-- Top Anchor -->
                    <div id="top"></div>

                    
                        <!-- Hamburger Button -->
                        <button class="MD-burger-icon sidebar-toggle">
                            <span class="MD-burger-layer"></span>
                        </button>
                    

                    <!-- Post TOC -->

    
    <!-- Back Button -->
    <!--
    <div class="material-back" id="backhome-div" tabindex="0">
        <a class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon"
           href="#" onclick="window.history.back();return false;"
           target="_self"
           role="button"
           data-upgraded=",MaterialButton,MaterialRipple">
            <i class="material-icons" role="presentation">arrow_back</i>
            <span class="mdl-button__ripple-container">
                <span class="mdl-ripple"></span>
            </span>
        </a>
    </div>
    -->


    <!-- Left aligned menu below button -->
    
    
    <button id="post-toc-trigger-btn"
        class="mdl-button mdl-js-button mdl-button--icon">
        <i class="material-icons">format_list_numbered</i>
    </button>

    <ul class="post-toc-wrap mdl-menu mdl-menu--bottom-left mdl-js-menu mdl-js-ripple-effect" for="post-toc-trigger-btn" style="max-height:80vh; overflow-y:scroll;">
        <ol class="post-toc"><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#jQuery-用法"><span class="post-toc-number">1.</span> <span class="post-toc-text">jQuery()用法</span></a><ol class="post-toc-child"><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#用法一"><span class="post-toc-number">1.0.1.</span> <span class="post-toc-text">用法一</span></a></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#用法二"><span class="post-toc-number">1.0.2.</span> <span class="post-toc-text">用法二</span></a></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#用法三"><span class="post-toc-number">1.0.3.</span> <span class="post-toc-text">用法三</span></a></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#用法四"><span class="post-toc-number">1.0.4.</span> <span class="post-toc-text">用法四</span></a></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#用法五"><span class="post-toc-number">1.0.5.</span> <span class="post-toc-text">用法五</span></a></li></ol></li></ol></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#jQuery-fn-init方法"><span class="post-toc-number">2.</span> <span class="post-toc-text">jQuery.fn.init方法</span></a></li></ol>
    </ul>
    




<!-- Layouts -->

    <!-- Post Module -->
    <div class="material-post_container">

        <div class="material-post mdl-grid">
            <div class="mdl-card mdl-shadow--4dp mdl-cell mdl-cell--12-col">

                <!-- Post Header(Thumbnail & Title) -->
                
    <!-- Paradox Post Header -->
    
        
            <!-- Random Thumbnail -->
            <div class="post_thumbnail-random mdl-card__media mdl-color-text--grey-50">
            <script type="text/ls-javascript" id="post-thumbnail-script">
    var randomNum = Math.floor(Math.random() * 19 + 1);

    $('.post_thumbnail-random').attr('data-original', '/img/random/material-' + randomNum + '.png');
    $('.post_thumbnail-random').addClass('lazy');
</script>

        
    
            <p class="article-headline-p">
                jQuery-源码分析（二）：jQuery核心函数
            </p>
        </div>





                
                    <!-- Paradox Post Info -->
                    <div class="mdl-color-text--grey-700 mdl-card__supporting-text meta">

    <!-- Author Avatar -->
    <div id="author-avatar">
        <img src="/img/avatar.png" width="44px" height="44px" alt="Author Avatar"/>
    </div>
    <!-- Author Name & Date -->
    <div>
        <strong>C-Jimmy</strong>
        <span>12月 02, 2017</span>
    </div>

    <div class="section-spacer"></div>

    <!-- Favorite -->
    <!--
        <button id="article-functions-like-button" class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon btn-like">
            <i class="material-icons" role="presentation">favorite</i>
            <span class="visuallyhidden">favorites</span>
        </button>
    -->

    <!-- Qrcode -->
    
        <button id="article-functions-qrcode-button" class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon">
    <i class="material-icons" role="presentation">devices other</i>
    <span class="visuallyhidden">devices other</span>
</button>
<ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect" for="article-functions-qrcode-button">
    <li class="mdl-menu__item">在其它设备中阅读本文章</li>
    
        <img src="https://pan.baidu.com/share/qrcode?w=246&h=246&url=https://c-jimmy.github.io/2017/12/02/jQuery-源码分析（二）：jQuery核心函数/">
    
</ul>

    

    <!-- Tags (bookmark) -->
    
    <button id="article-functions-viewtags-button" class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon">
        <i class="material-icons" role="presentation">bookmark</i>
        <span class="visuallyhidden">bookmark</span>
    </button>
    <ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect" for="article-functions-viewtags-button">
        <li class="mdl-menu__item">
        <a class="post_tag-link" href="/tags/jQuery/">jQuery</a></li><li class="mdl-menu__item"><a class="post_tag-link" href="/tags/jQuery-fn-init/">jQuery.fn.init()</a></li><li class="mdl-menu__item"><a class="post_tag-link" href="/tags/jQuery核心函数/">jQuery核心函数</a></li><li class="mdl-menu__item"><a class="post_tag-link" href="/tags/源码分析/">源码分析</a>
    </ul>
    

    <!-- Share -->
    
        <button id="article-fuctions-share-button" class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon">
    <i class="material-icons" role="presentation">share</i>
    <span class="visuallyhidden">share</span>
</button>
<ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect" for="article-fuctions-share-button">
    

    

    <!-- Share Weibo -->
    
        <a class="post_share-link" href="http://service.weibo.com/share/share.php?appkey=&title=jQuery-源码分析（二）：jQuery核心函数&url=https://c-jimmy.github.io/2017/12/02/jQuery-源码分析（二）：jQuery核心函数/index.html&pic=https://c-jimmy.github.io/img/favicon.png&searchPic=false&style=simple" target="_blank">
            <li class="mdl-menu__item">
                分享到微博
            </li>
        </a>
    

    <!-- Share Twitter -->
    
        <a class="post_share-link" href="https://twitter.com/intent/tweet?text=jQuery-源码分析（二）：jQuery核心函数&url=https://c-jimmy.github.io/2017/12/02/jQuery-源码分析（二）：jQuery核心函数/index.html&via=C-Jimmy" target="_blank">
            <li class="mdl-menu__item">
                分享到 Twitter
            </li>
        </a>
    

    <!-- Share Facebook -->
    
        <a class="post_share-link" href="https://www.facebook.com/sharer/sharer.php?u=https://c-jimmy.github.io/2017/12/02/jQuery-源码分析（二）：jQuery核心函数/index.html" target="_blank">
            <li class="mdl-menu__item">
                分享到 Facebook
            </li>
        </a>
    

    <!-- Share Google+ -->
    
        <a class="post_share-link" href="https://plus.google.com/share?url=https://c-jimmy.github.io/2017/12/02/jQuery-源码分析（二）：jQuery核心函数/index.html" target="_blank">
            <li class="mdl-menu__item">
                分享到 Google+
            </li>
        </a>
    

    <!-- Share LinkedIn -->
    

    <!-- Share QQ -->
    

    <!-- Share Telegram -->
    
</ul>

    
</div>

                

                <!-- Post Content -->
                <div id="post-content" class="mdl-color-text--grey-700 mdl-card__supporting-text fade out">
    
        <blockquote>
<p><code>jQuery()</code> 函数是jQuery库的最核心的函数，jQuery的一切都是基于此函数的，该函数主要用于获取HTML DOM元素并将其封装为jQuery对象，以便jQuery对象提供的其他属性和方法对DOM元素进行操作，<a id="more"></a>jQuery()函数内部实现的方式是调用jQuery.fn.init() 方法进行创建jQuery对象并返回  </p>
</blockquote>
<h2 id="jQuery-用法"><a href="#jQuery-用法" class="headerlink" title="jQuery()用法"></a>jQuery()用法</h2><h4 id="用法一"><a href="#用法一" class="headerlink" title="用法一"></a>用法一</h4><p><strong>查找DOM元素并封装为jQuery对象;</strong> 将选择器字符串selector所对应的HTML DOM元素封装为jQuery对象。可选参数context用于指定查找DOM元素的范围。</p>
<pre class="line-numbers language-js"><code class="language-js"><span class="token comment" spellcheck="true">// [context]:指定选择器字符串的查找范围，可以是DOM元素、DOM元素数组、文档、jQuery对象。如果省略该参数，默认为当前文档。</span>
<span class="token function">jQuery</span><span class="token punctuation">(</span> selector <span class="token punctuation">[</span><span class="token punctuation">,</span>context<span class="token punctuation">]</span> <span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment" spellcheck="true">// 示例</span>
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'p'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment" spellcheck="true">// 选择当前文章中所有的P标签DOM元素，并封装成jQuery对象</span>
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'#username'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment" spellcheck="true">// 选择id属性为username的DOM元素，并封装成jQuery对象</span>
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'.test'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment" spellcheck="true">// 选择所有class为test的DOM元素，并封装成jQuery对象</span>
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'p .test'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment" spellcheck="true">// 选择带有test类的P标签元素，并封装成jQuery对象</span>
<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>
<h4 id="用法二"><a href="#用法二" class="headerlink" title="用法二"></a>用法二</h4><p><strong>将DOM元素封装为jQuery对象;</strong>  将指定对象obj封装为jQuery对象。这个对象可以是一个DOM元素(Element)，也可以是一个DOM元素数组，也可以是一个jQuery对象(对其进行克隆)，或者其他对象。你也可以省略该参数，从而返回一个空的jQuery对象。</p>
<pre class="line-numbers language-js"><code class="language-js"><span class="token comment" spellcheck="true">// [obj]:指定的对象，用于封装为jQuery对象。可以是DOM元素、DOM元素数组、文档、jQuery对象等。</span>
<span class="token function">jQuery</span><span class="token punctuation">(</span> <span class="token punctuation">[</span>obj<span class="token punctuation">]</span> <span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment" spellcheck="true">// 示例</span>
<span class="token keyword">var</span> dom <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'username'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment" spellcheck="true">// 用js原生方法获取单个dom元素</span>
<span class="token function">$</span><span class="token punctuation">(</span>dom<span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token keyword">var</span> doms <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementsByTagName</span><span class="token punctuation">(</span><span class="token string">'li'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment" spellcheck="true">// 用js原生方法获取dom元素数组</span>
<span class="token function">$</span><span class="token punctuation">(</span>doms<span class="token punctuation">)</span>

<span class="token function">$</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token comment" spellcheck="true">// 将空对象封装成jQuery对象</span>
<span class="token function">$</span><span class="token punctuation">(</span>document<span class="token punctuation">.</span>body<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment" spellcheck="true">// 将body元素封装为jQuery对象</span>
<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>
<h4 id="用法三"><a href="#用法三" class="headerlink" title="用法三"></a>用法三</h4><p><strong>创建DOM元素并封装成jQuery对象;</strong>  根据HTML标签字符串html动态地创建临时DOM元素，并将其封装为jQuery对象。可选参数ownerDocument用于指定临时DOM元素在哪个文档中创建(如果存在多个文档的话，例如框架页面</p>
<pre class="line-numbers language-js"><code class="language-js"><span class="token comment" spellcheck="true">// 指定的HTML标签字符串，例如"&lt;div/>"、"&lt;div>&lt;/div>"、"&lt;div id='tagId'>&lt;/div>"(标签中也可以嵌套标签，只要符合html语法即可)。</span>
<span class="token comment" spellcheck="true">// 指定DOM元素在哪个文档上进行临时创建，默认为当前文档。</span>
<span class="token function">jQuery</span><span class="token punctuation">(</span> html <span class="token punctuation">[</span><span class="token punctuation">,</span>ownerDocument<span class="token punctuation">]</span> <span class="token punctuation">)</span>

<span class="token comment" spellcheck="true">// 示例</span>
<span class="token comment" spellcheck="true">// 创建普通标签 （以下统统属于普通标签创建方式）</span>
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'&lt;li>'</span><span class="token punctuation">)</span> 
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'&lt;li/>'</span><span class="token punctuation">)</span> 
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'&lt;li>&lt;/li>'</span><span class="token punctuation">)</span> 
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'&lt;li>&lt;li>'</span><span class="token punctuation">)</span> <span class="token comment" spellcheck="true">//这种形式创建两个li元素</span>
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'&lt;li title = "li-title">&lt;/li>'</span><span class="token punctuation">)</span> <span class="token comment" spellcheck="true">//内置属性的标签</span>
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'&lt;li>111&lt;/li>&lt;li>222&lt;/li>'</span><span class="token punctuation">)</span> <span class="token comment" spellcheck="true">//多标签</span>
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'&lt;ul>&lt;li>111&lt;/li>&lt;li>222&lt;/li>&lt;/ul>'</span><span class="token punctuation">)</span> <span class="token comment" spellcheck="true">//含有子元素的标签</span>

<span class="token keyword">var</span> html <span class="token operator">=</span> <span class="token template-string"><span class="token string">`
    &lt;table>
        &lt;tr>
            &lt;td>单元一&lt;/td>
            &lt;td>单元二&lt;/td>
        &lt;/tr>
        &lt;tr>
            &lt;td>单元三&lt;/td>
            &lt;td>单元四&lt;/td>
        &lt;/tr>
    &lt;/table>
`</span></span><span class="token punctuation">;</span>
<span class="token function">$</span><span class="token punctuation">(</span>html<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment" spellcheck="true">// 创建一个表格</span>

<span class="token comment" spellcheck="true">// 内部实现</span>
jQuery<span class="token punctuation">.</span><span class="token function">merge</span><span class="token punctuation">(</span> <span class="token keyword">this</span><span class="token punctuation">,</span> jQuery<span class="token punctuation">.</span><span class="token function">parseHTML</span><span class="token punctuation">(</span>
      match<span class="token punctuation">[</span> <span class="token number">1</span> <span class="token punctuation">]</span><span class="token punctuation">,</span>
      document<span class="token punctuation">,</span> <span class="token comment" spellcheck="true">// 也可以是iframe中其他页面的document</span>
      <span class="token boolean">true</span>
<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>
<h4 id="用法四"><a href="#用法四" class="headerlink" title="用法四"></a>用法四</h4><p><strong>根据HTML字符串，和包含属性事件方法的properties对象，创建DOM对象，并封装成jQuery对象；</strong>  </p>
<pre class="line-numbers language-js"><code class="language-js"><span class="token comment" spellcheck="true">// properties: 指定的对象，用于指定DOM元素的属性、事件和方法。例如：{name:"username", "click":function(){}}</span>
<span class="token function">jQuery</span><span class="token punctuation">(</span> html <span class="token punctuation">,</span> properties <span class="token punctuation">)</span>

<span class="token comment" spellcheck="true">// 示例</span>
<span class="token keyword">var</span> temBlog <span class="token operator">=</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'&lt;a/>'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
    id<span class="token punctuation">:</span> <span class="token string">'blog'</span><span class="token punctuation">,</span>
    title<span class="token punctuation">:</span> <span class="token string">'C-jimmy博客'</span><span class="token punctuation">,</span>
    html<span class="token punctuation">:</span> <span class="token string">'C-jimmy博客'</span><span class="token punctuation">,</span>
    href<span class="token punctuation">:</span> <span class="token string">'http://c-jimmy.github.io'</span><span class="token punctuation">,</span>
    click<span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token comment" spellcheck="true">// 具体事件代码</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
temBlog<span class="token punctuation">.</span><span class="token function">appendTo</span><span class="token punctuation">(</span><span class="token string">'body'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment" spellcheck="true">// 追加到body标签内容的末尾</span>

<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'&lt;input/>'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
    type<span class="token punctuation">:</span> <span class="token string">'checkbox'</span><span class="token punctuation">,</span>
    val<span class="token punctuation">:</span> <span class="token string">'def'</span><span class="token punctuation">,</span> <span class="token comment" spellcheck="true">// 表示表单元素的value属性值或textarea的输入内容</span>
    click<span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        <span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">"点击了复选框"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">appendTo</span><span class="token punctuation">(</span><span class="token string">"body"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment" spellcheck="true">// 内部实现</span>
<span class="token comment" spellcheck="true">// 对传入的第二个参数对象进行遍历</span>
<span class="token keyword">for</span> <span class="token punctuation">(</span> match <span class="token keyword">in</span> context <span class="token punctuation">)</span> <span class="token punctuation">{</span>

    <span class="token comment" spellcheck="true">// 判断json的name值是不是个jquery函数，如果是，则调用函数</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span> jQuery<span class="token punctuation">.</span><span class="token function">isFunction</span><span class="token punctuation">(</span> <span class="token keyword">this</span><span class="token punctuation">[</span> match <span class="token punctuation">]</span> <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">this</span><span class="token punctuation">[</span> match <span class="token punctuation">]</span><span class="token punctuation">(</span> context<span class="token punctuation">[</span> match <span class="token punctuation">]</span> <span class="token punctuation">)</span><span class="token punctuation">;</span>

    <span class="token comment" spellcheck="true">// 如果json的name值不是函数，则创建一个name值的属性</span>
    <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">attr</span><span class="token punctuation">(</span> match<span class="token punctuation">,</span> context<span class="token punctuation">[</span> match <span class="token punctuation">]</span> <span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>
<h4 id="用法五"><a href="#用法五" class="headerlink" title="用法五"></a>用法五</h4><p><strong>在当前文档载入完成后，执行指定的函数callback。</strong></p>
<pre class="line-numbers language-js"><code class="language-js"><span class="token function">jQuery</span><span class="token punctuation">(</span> callback <span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment" spellcheck="true">// 示例</span>
<span class="token function">$</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token comment" spellcheck="true">// 本文档页面载入后自动执行这段代码</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token function">$</span><span class="token punctuation">(</span>document<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">ready</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token comment" spellcheck="true">// document文档ready后，自动执行这段代码</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>
<h2 id="jQuery-fn-init方法"><a href="#jQuery-fn-init方法" class="headerlink" title="jQuery.fn.init方法"></a>jQuery.fn.init方法</h2><blockquote>
<p>调用jQuery方法后，会通过jQuery.fn.init()方法进行实例化一个jQuery对象。jQuery.fn.init的功能是对传进来的selector参数进行分析，进行各种不同的处理，然后生成jQuery对象。<br><img src="http://oz1lum573.bkt.clouddn.com/c-jimmy/171207/kJHIIkgA2C.png?imageslim" alt="mark"><br><a href="http://oz1lum573.bkt.clouddn.com/c-jimmy/171207/kJHIIkgA2C.png?imageslim" target="_blank" rel="external">【查看大图】</a></p>
</blockquote>
<pre class="line-numbers language-js"><code class="language-js"><span class="token comment" spellcheck="true">// selector: 选择器</span>
<span class="token comment" spellcheck="true">// context: 上下文</span>
<span class="token comment" spellcheck="true">// root: 实例[ init 内部定义的，不是我们手动从外部传入的]</span>
init <span class="token operator">=</span> jQuery<span class="token punctuation">.</span>fn<span class="token punctuation">.</span>init <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span> selector<span class="token punctuation">,</span> context<span class="token punctuation">,</span> root <span class="token punctuation">)</span> <span class="token punctuation">{</span>

        <span class="token comment" spellcheck="true">// HANDLE: $(""), $(null), $(undefined), $(false)</span>
        <span class="token comment" spellcheck="true">// 判断传入的参数selector, 如果为'', null, undefined, false; </span>
        <span class="token comment" spellcheck="true">// 直接返回当前init实例对象( 这时这个实例对象实际上是一个空的jquery对象 )</span>
        <span class="token keyword">if</span> <span class="token punctuation">(</span> <span class="token operator">!</span>selector <span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">;</span> 
        <span class="token punctuation">}</span>

        <span class="token comment" spellcheck="true">// Handle HTML strings</span>
        <span class="token comment" spellcheck="true">// 1. 判断传入参数类型是否为 string</span>
        <span class="token keyword">if</span> <span class="token punctuation">(</span> <span class="token keyword">typeof</span> selector <span class="token operator">===</span> <span class="token string">"string"</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token comment" spellcheck="true">// ...</span>

        <span class="token comment" spellcheck="true">// HANDLE: $(DOMElement)</span>
        <span class="token comment" spellcheck="true">// 2. 如果不是 string类型，则判断是否有nodeType属性【nodeType属性是DOM元素特有的属性】</span>
        <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span> selector<span class="token punctuation">.</span>nodeType <span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token keyword">this</span><span class="token punctuation">[</span> <span class="token number">0</span> <span class="token punctuation">]</span> <span class="token operator">=</span> selector<span class="token punctuation">;</span>
            <span class="token keyword">this</span><span class="token punctuation">.</span>length <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">;</span>
            <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">;</span>

        <span class="token comment" spellcheck="true">// HANDLE: $(function)</span>
        <span class="token comment" spellcheck="true">// 3. 如果不是string类型，也不是DOM元素，则判断是否是函数类型</span>
        <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span> jQuery<span class="token punctuation">.</span><span class="token function">isFunction</span><span class="token punctuation">(</span> selector <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token keyword">return</span> root<span class="token punctuation">.</span>ready <span class="token operator">!==</span> undefined <span class="token operator">?</span>
                root<span class="token punctuation">.</span><span class="token function">ready</span><span class="token punctuation">(</span> selector <span class="token punctuation">)</span> <span class="token punctuation">:</span>
                <span class="token function">selector</span><span class="token punctuation">(</span> jQuery <span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>
<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>
<p>init完整源码分析，请看下一节</p>
<p>参考文献：<br><a href="http://blog.csdn.net/lfcss/article/details/52086823" target="_blank" rel="external">jQuery源码研究分析学习笔记</a><br><a href="http://blog.csdn.net/lihongxun945/article/details/10304285" target="_blank" rel="external">jquery 实现原理二：core.js</a></p>
<p>参考文献：<br><a href="http://blog.csdn.net/lfcss/article/details/52086823" target="_blank" rel="external">jQuery源码研究分析学习笔记</a><br><a href="http://blog.csdn.net/lihongxun945/article/details/10304285" target="_blank" rel="external">jquery 实现原理二：core.js</a></p>

        
    

    
</div>


                

                <!-- Post Comments -->
                
                    
    <!-- 使用 gitcoment -->
<div id="gitment-comment">
    <!-- Gitment 评论框 -->
<div id="container"></div>
</div>
<style>
    #gitment-comment{
        background-color: #eee;
        padding: 2pc;
    }
</style>
<link rel="stylesheet" href="https://imsun.github.io/gitment/style/default.css">
<script src="https://imsun.github.io/gitment/dist/gitment.browser.js"></script>
<script>
    var gitment = new Gitment({
        //id: '页面 ID', // 可选。默认为 location.href
        owner: 'c-jimmy',
        repo: 'c-jimmy.github.io',
        oauth: {
            client_id: 'bf8a277426958f1eee1e',
            client_secret: '41817d6823ae6ffb157ba5f8653619ffcf57a674',
        },
    })
    gitment.render('container')
</script>

                
            </div>

            <!-- Post Prev & Next Nav -->
            <nav class="material-nav mdl-color-text--grey-50 mdl-cell mdl-cell--12-col">
    <!-- Prev Nav -->
    
        <a href="/2017/12/07/jQuery-源码分析（三）：jQuery-fn-init-源码逐行详解/" id="post_nav-newer" class="prev-content">
            <button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon mdl-color--white mdl-color-text--grey-900" role="presentation">
                <i class="material-icons">arrow_back</i>
            </button>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            新篇
        </a>
    

    <!-- Section Spacer -->
    <div class="section-spacer"></div>

    <!-- Next Nav -->
    
        <a href="/2017/12/02/jQuery-源码分析（一）：自执行与构建原理/" id="post_nav-older" class="next-content">
            旧篇
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon mdl-color--white mdl-color-text--grey-900" role="presentation">
                <i class="material-icons">arrow_forward</i>
            </button>
        </a>
    
</nav>

        </div>
    </div>



                    
                        <!-- Overlay For Active Sidebar -->
<div class="sidebar-overlay"></div>

<!-- Material sidebar -->
<aside id="sidebar" class="sidebar sidebar-colored sidebar-fixed-left" role="navigation">
    <div id="sidebar-main">
        <!-- Sidebar Header -->
        <div class="sidebar-header header-cover" style="background-image: url(/img/sidebar_header.png);">
    <!-- Top bar -->
    <div class="top-bar"></div>

    <!-- Sidebar toggle button -->
    <button type="button" class="sidebar-toggle mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon" style="display: initial;" data-upgraded=",MaterialButton,MaterialRipple">
        <i class="material-icons">clear_all</i>
        <span class="mdl-button__ripple-container">
            <span class="mdl-ripple">
            </span>
        </span>
    </button>

    <!-- Sidebar Avatar -->
    <div class="sidebar-image">
        <img src="/img/avatar.png" alt="C-Jimmy's avatar">
    </div>

    <!-- Sidebar Email -->
    <a data-toggle="dropdown" class="sidebar-brand" href="#settings-dropdown">
        923415929@qq.com
        <b class="caret"></b>
    </a>
</div>


        <!-- Sidebar Navigation  -->
        <ul class="nav sidebar-nav">
    <!-- User dropdown  -->
    <li class="dropdown">
        <ul id="settings-dropdown" class="dropdown-menu">
            
        </ul>
    </li>

    <!-- Homepage -->
    
        <li id="sidebar-first-li">
            <a href="/">
                
                    <i class="material-icons sidebar-material-icons">home</i>
                
                主页
            </a>
        </li>
        
    

    <!-- Archives  -->
    
        <li class="dropdown">
            <a href="#" class="ripple-effect dropdown-toggle" data-toggle="dropdown">
                
                    <i class="material-icons sidebar-material-icons">inbox</i>
                
                    归档
                <b class="caret"></b>
            </a>
            <ul class="dropdown-menu">
            <li>
                <a class="sidebar_archives-link" href="/archives/2018/03/">三月 2018<span class="sidebar_archives-count">1</span></a></li><li><a class="sidebar_archives-link" href="/archives/2017/12/">十二月 2017<span class="sidebar_archives-count">3</span></a></li><li><a class="sidebar_archives-link" href="/archives/2017/11/">十一月 2017<span class="sidebar_archives-count">6</span></a>
            </ul>
        </li>
        
    

    <!-- Categories  -->
    
        <li class="dropdown">
            <a href="#" class="ripple-effect dropdown-toggle" data-toggle="dropdown">
                
                    <i class="material-icons sidebar-material-icons">chrome_reader_mode</i>
                
                分类
                <b class="caret"></b>
            </a>
            <ul class="dropdown-menu">
                <li>
                <a class="sidebar_archives-link" href="/categories/jQuery/">jQuery<span class="sidebar_archives-count">3</span></a></li><li><a class="sidebar_archives-link" href="/categories/javascript/">javascript<span class="sidebar_archives-count">1</span></a></li><li><a class="sidebar_archives-link" href="/categories/vue/">vue<span class="sidebar_archives-count">2</span></a></li><li><a class="sidebar_archives-link" href="/categories/前端体系/">前端体系<span class="sidebar_archives-count">1</span></a></li><li><a class="sidebar_archives-link" href="/categories/杂项/">杂项<span class="sidebar_archives-count">3</span></a>
            </ul>
        </li>
        
    

    <!-- Pages  -->
    
        <li>
            <a href="/about" title="关于我">
                
                    <i class="material-icons sidebar-material-icons">person</i>
                
                关于我
            </a>
        </li>
        
    
        <li>
            <a href="/links" title="友情链接">
                
                    <i class="material-icons sidebar-material-icons">links</i>
                
                友情链接
            </a>
        </li>
        
    

    <!-- Article Number  -->
    
</ul>


        <!-- Sidebar Footer -->
        <!--
I'm glad you use this theme, the development is no so easy, I hope you can keep the copyright, I will thank you so much.
If you still want to delete the copyrights, could you still retain the first one? Which namely "Theme Material"
It will not impact the appearance and can give developers a lot of support :)

很高兴您使用并喜欢该主题，开发不易 十分谢谢与希望您可以保留一下版权声明。
如果您仍然想删除的话 能否只保留第一项呢？即 "Theme Material"
它不会影响美观并可以给开发者很大的支持和动力。 :)
-->

<!-- Sidebar Divider -->

    <div class="sidebar-divider"></div>


<!-- Theme Material -->

    <a href="https://github.com/viosey/hexo-theme-material"  class="sidebar-footer-text-a" target="_blank">
        <div class="sidebar-text mdl-button mdl-js-button mdl-js-ripple-effect sidebar-footer-text-div" data-upgraded=",MaterialButton,MaterialRipple">
            主题 - Material
            <span class="sidebar-badge badge-circle">i</span>
        </div>
    </a>


<!-- Help & Support -->
<!--

-->

<!-- Feedback -->
<!--

-->

<!-- About Theme -->
<!--

-->

    </div>

    <!-- Sidebar Image -->
    

</aside>

                    

                    
                        <!-- Footer Top Button -->
                        <div id="back-to-top" class="toTop-wrap">
    <a href="#top" class="toTop">
        <i class="material-icons footer_top-i">expand_less</i>
    </a>
</div>

                    

                    <!--Footer-->
<footer class="mdl-mini-footer" id="bottom">
    
        <!-- Paradox Footer Left Section -->
        <div class="mdl-mini-footer--left-section sns-list">
    <!-- Twitter -->
    
        <a href="https://twitter.com/twitter" target="_blank">
            <button class="mdl-mini-footer--social-btn social-btn footer-sns-twitter">
                <span class="visuallyhidden">Twitter</span>
            </button><!--
     --></a>
    

    <!-- Facebook -->
    
        <a href="https://www.facebook.com/facebook" target="_blank">
            <button class="mdl-mini-footer--social-btn social-btn footer-sns-facebook">
                <span class="visuallyhidden">Facebook</span>
            </button><!--
     --></a>
    

    <!-- Google + -->
    
        <a href="https://www.google.com/" target="_blank">
            <button class="mdl-mini-footer--social-btn social-btn footer-sns-gplus">
                <span class="visuallyhidden">Google Plus</span>
            </button><!--
     --></a>
    

    <!-- Weibo -->
    

    <!-- Instagram -->
    

    <!-- Tumblr -->
    

    <!-- Github -->
    
        <a href="https://github.com/c-jimmy" target="_blank">
            <button class="mdl-mini-footer--social-btn social-btn footer-sns-github">
                <span class="visuallyhidden">Github</span>
            </button><!--
     --></a>
    

    <!-- LinkedIn -->
    

    <!-- Zhihu -->
    

    <!-- Bilibili -->
    

    <!-- Telegram -->
    
    
    <!-- V2EX -->
    
</div>


        <!--Copyright-->
        <div id="copyright">
            Copyright&nbsp;©<script type="text/javascript">var fd = new Date();document.write("&nbsp;" + fd.getFullYear() + "&nbsp;");</script>C-Jimmy个人小站
            
        </div>

        <!-- Paradox Footer Right Section -->

        <!--
        I am glad you use this theme, the development is no so easy, I hope you can keep the copyright.
        It will not impact the appearance and can give developers a lot of support :)

        很高兴您使用该主题，开发不易，希望您可以保留一下版权声明。
        它不会影响美观并可以给开发者很大的支持。 :)
        -->

        <div class="mdl-mini-footer--right-section">
            <div>
                <div class="footer-develop-div">Powered by <a href="https://hexo.io" target="_blank" class="footer-develop-a">Hexo</a></div>
                <div class="footer-develop-div">Theme - <a href="https://github.com/viosey/hexo-theme-material" target="_blank" class="footer-develop-a">Material</a></div>
            </div>
        </div>
    
</footer>


                    <!-- Import JS File -->

    <script>lsloader.load("lazyload_js","/js/lazyload.min.js?wgjW/HuQG9JDgvPDPoRAng==", true)</script>



    <script>lsloader.load("js_js","/js/js.min.js?V/53wGualMuiPM3xoetD5Q==", true)</script>



    <script>lsloader.load("np_js","/js/nprogress.js?pl3Qhb9lvqR1FlyLUna1Yw==", true)</script>


<script type="text/ls-javascript" id="NProgress-script">
    NProgress.configure({
        showSpinner: true
    });
    NProgress.start();
    $('#nprogress .bar').css({
        'background': '#29d'
    });
    $('#nprogress .peg').css({
        'box-shadow': '0 0 10px #29d, 0 0 15px #29d'
    });
    $('#nprogress .spinner-icon').css({
        'border-top-color': '#29d',
        'border-left-color': '#29d'
    });
    setTimeout(function() {
        NProgress.done();
        $('.fade').removeClass('out');
    }, 800);
</script>









   <!-- Gitment -->





<!-- UC Browser Compatible -->
<script>
	var agent = navigator.userAgent.toLowerCase();
	if(agent.indexOf('ucbrowser')>0) {
		document.write('<link rel="stylesheet" href="/css/uc.css">');
	   alert('由于 UC 浏览器使用极旧的内核，而本网站使用了一些新的特性。\n为了您能更好的浏览，推荐使用 Chrome 或 Firefox 浏览器。');
	}
</script>

<!-- Import prettify js  -->



<!-- Window Load -->
<!-- add class for prettify -->
<script type="text/ls-javascript" id="window-load">
    $(window).on('load', function() {
        // Post_Toc parent position fixed
        $('.post-toc-wrap').parent('.mdl-menu__container').css('position', 'fixed');
    });

    
    
</script>

<!-- MathJax Load-->


<!-- Bing Background -->


<script type="text/ls-javascript" id="lazy-load">
    // Offer LazyLoad
    queue.offer(function(){
        $('.lazy').lazyload({
            effect : 'show'
        });
    });

    // Start Queue
    $(document).ready(function(){
        setInterval(function(){
            queue.execNext();
        },200);
    });
</script>

<!-- Custom Footer -->



<script>
    (function(){
        var scriptList = document.querySelectorAll('script[type="text/ls-javascript"]')

        for (var i = 0; i < scriptList.length; ++i) {
            var item = scriptList[i];
            lsloader.runInlineScript(item.id,item.id);
        }
    })()
console.log('\n %c © Material Theme | Version: 1.5.0 | https://github.com/viosey/hexo-theme-material %c \n', 'color:#455a64;background:#e0e0e0;padding:5px 0;border-top-left-radius:5px;border-bottom-left-radius:5px;', 'color:#455a64;background:#e0e0e0;padding:5px 0;border-top-right-radius:5px;border-bottom-right-radius:5px;');
</script>

                </main>
            </div>
        </body>
    
</html>
